
<template>
    <p>name: {{nameRef}}</p>

</template>

<script>
import { ref, toRefs, watch } from 'vue'

export default {
  name: 'ToRefSon',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    // const { name } = props.name // 报错： will cause the value to lose reactivity
    const { name } = toRefs(props)
    const nameRef = ref('')
    watch(
      name,
      (name) => {
        nameRef.value = name + 'new'
      },
      {
        immediate: true
      }
    )
    return {
      nameRef
    }
  }
}

</script>
